<template>
  <el-card class="recent-visits-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <div class="header-left">
          <el-icon class="header-icon"><Clock /></el-icon>
          <span class="header-title">最近访问记录</span>
        </div>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :shortcuts="shortcuts"
          :clearable="false"
          class="date-picker"
          @change="handleDateChange"
        />
      </div>
    </template>
    <Table 
      ref="tableRef" 
      :params="queryParams" 
      :api="getRecentVisits"
    >
      <template #columns>
        <el-table-column prop="time" label="访问时间" width="180" align="center">
          <template #default="{ row }">
            <span class="time-text">{{ formatTime(row.time) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="IP地址" width="140" align="center" />
        <el-table-column prop="location" label="地理位置" width="140" align="center">
          <template #default="{ row }">
            <el-tooltip :content="row.location" placement="top" :show-after="500">
              <span class="location-text">{{ row.location }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="device" label="设备" width="120" align="center">
          <template #default="{ row }">
            <el-tooltip :content="row.device" placement="top" :show-after="500">
              <span class="device-text">{{ row.device }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="来源" align="center">
          <template #default="{ row }">
            <el-tag 
              :type="getSourceTagType(row.source)"
              class="source-tag"
              effect="light"
              round
            >
              {{ row.source }}
            </el-tag>
          </template>
        </el-table-column>
      </template>
    </Table>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Table from '@/components/table/index.vue'
import { getRecentVisits } from '@/api/visitor'
import dayjs from 'dayjs'
import type { TagProps } from 'element-plus'
import { Clock } from '@element-plus/icons-vue'

const tableRef = ref<InstanceType<typeof Table> | null>(null)
const dateRange = ref()

// 获取最近三个月的日期范围
const getLastThreeMonths = () => {
  const end = new Date()
  const start = new Date()
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
  return [dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD')]
}

const queryParams = reactive({
  startDate: getLastThreeMonths()[0],
  endDate: getLastThreeMonths()[1]
})

// 初始化日期范围
dateRange.value = getLastThreeMonths()

// 快捷选项
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

const handleDateChange = (val: [string, string]) => {
  if (val) {
    queryParams.startDate = val[0]
    queryParams.endDate = val[1]
    tableRef.value?.fetchData()
  }
}

const formatTime = (time: string) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

const getSourceTagType = (source: string): TagProps['type'] => {
  const typeMap: Record<string, TagProps['type']> = {
    '直接访问': 'primary',
    '搜索引擎': 'success',
    '社交媒体': 'warning',
    '邮件营销': 'info'
  }
  return typeMap[source] || 'info'
}
</script>

<style scoped lang="scss">
.recent-visits-card {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;

    .header-left {
      display: flex;
      align-items: center;
      gap: 8px;

      .header-icon {
        font-size: 18px;
        color: var(--el-color-primary);
      }

      .header-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--el-text-color-primary);
      }
    }

    .date-picker {
      width: 340px;
    }
  }

  :deep() {
    .el-card__header {
      padding: 15px;
      border-bottom: 1px solid var(--el-border-color-light);
    }

    .el-table {
      .time-text {
        color: var(--el-text-color-secondary);
        font-family: monospace;
      }

      .location-text,
      .device-text {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }

      .source-tag {
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
        border-radius: 12px;
        font-size: 12px;
      }

      .el-table__row {
        transition: all 0.3s ease;

        &:hover {
          background-color: var(--el-fill-color-light) !important;
        }
      }

      .el-table__header {
        th {
          background-color: var(--el-fill-color-light);
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }
    }
  }
}

// 暗黑模式适配
html.dark {
  .recent-visits-card {
    :deep() {
      .el-table {
        .time-text {
          color: var(--el-text-color-secondary);
        }
      }
    }
  }
}
</style> 